<template>
    <div class="common-layout">
        <el-container style="padding: 0 150px;">
            <el-header class="tips">
                <n-alert title="提示" type="warning" closable>
                    互联网并非非法之地，请谨言慎行；文明，和谐，尊敬，友爱；呵护社区环境，人人有责。
                </n-alert>
            </el-header>
            <el-container class="container">
                <el-aside class="modules">
                    <ul style="display: flex;justify-content: space-between;flex-wrap: wrap;">
                        <li class="chunk" @click="this.$router.push('/forum/spam')">水贴</li>
                        <li class="chunk" @click="this.$router.push('/forum/anime')">动漫</li>
                        <li class="chunk" @click="this.$router.push('/forum/comic')">漫画</li>
                        <li class="chunk" @click="this.$router.push('/forum/games')">游戏</li>
                    </ul>
                </el-aside>
                <el-main class="content">
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
const placement = ref("left");
const type = ref("card");
</script>

<style scoped>
/* 警告提示 */
.tips {
    width: 100%;
    height: fit-content;
    padding: 0;
    margin-top: 20px;
}

/* 功能和内容模块 */
.container {
    margin: 20px 0;
}

/* 论坛功能模块 */
.modules {
    width: 176px;
    height: 600px;
    background-color: #f6f6f6;
    margin-right: 20px;
    border-radius: 8px;
    box-shadow: 1px 1px 6px #ccc;
}

/* 论坛内容模块 */
.content {
    height: 800px;
    background-color: #f6f6f6;
    border-radius: 8px;
    box-shadow: 1px 1px 6px #ccc;
}

.chunk {
    background-color: #fff;
    padding: 20px;
    margin: 10px;
    border-radius: 4px;
    cursor: pointer;
}
</style>